<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Simple - 简！ </title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
    <meta name="description" content="Simple 是一个基于layui框架，一个轻量，简约，包含丰富模块化前端框架，帮您快速构建网站。">
    <link rel="stylesheet" href="./css/s.css">
    <link rel="stylesheet" href="./css/extend.css">
    <script src="./layui.js"></script>
</head>
<body>

<div class="s-header">
    <div class="layui-container flex space-between">
        <a class="s-header-a" href="./core.html">
            <img src="./img/logo/logo-grey.png" alt="" class="s-header-logo">
        </a>
        <ul class="s-header-menu">
            <li><a href="./">首页</a></li>
            <li><a href="./core.html" class="active">基础框架</a></li>
            <li><a href="http://www.we63.com/index.php">组件库</a></li>
        </ul>
    </div>
</div>

<div class="s-subheader" style="">
    <div class="layui-container flex">
        <ul class="flex">
            <li><a href="color.html">色彩</a></li>
            <li><a href="typo.html">排版</a></li>
            <li><a href="button.html">按钮</a></li>
            <li><a href="badge.html">徽标</a></li>
            <li><a href="nav.html">导航</a></li>
            <li><a href="breadcrumb.html">面包屑</a></li>
            <li><a href="table.html">表格</a></li>
            <li><a href="form.html">表单</a></li>
            <li><a href="panel.html">面板</a></li>
            <li><a href="blank.html">前台空页面</a></li>
            <li><a href="admin.html">后台空页面</a></li>
            <li><a href="help.html">辅助类</a></li>
        </ul>
    </div>
</div>


<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="heading-block">
                <h1>颜色·主题</h1>
                <p>好看的色彩，简单的主题</p>
            </div>
            <h1 class="heading-mi">主要色</h1>
            <div class="example">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="bg-blue text-white example-color">
                            <p>#1E9FFF</p>
                            <p> 蓝色 $primary</p>
                            <p>主题色</p>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-body example-color">
                            <p>#F4F6F9</p>
                            <p> body背景色 $bg-body</p>
                            <p>背景色</p>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-white  example-color" style="border:1px solid #ecedf2">
                            <p>#ecedf2</p>
                            <p> border边框颜色 $border-color</p>
                            <p>边框色</p>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-white  example-color" style="border:1px solid #ecedf2">
                            <p style="color: #768093">#768093</p>
                            <p style="color: #768093"> 全局默认字体颜色 $text-color</p>
                            <p style="color: #768093">正文色</p>
                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-white text-black example-color" style="border:1px solid #ecedf2">
                            <p style="color:#252629">#252629</p>
                            <p style="color:#252629"> Title 标题颜色 $title-color</p>
                            <p style="color: #252629">标题色</p>
                        </div>
                    </div>


                    <div class="layui-col-md3">
                        <div class="text-white example-color " style="border:1px solid #ecedf2">
                            <p style="color: #999999">#999999</p>
                            <p style="color: #999999"> desc描述颜色 $desc-color</p>
                            <p style="color: #999999">描述色</p>
                        </div>
                    </div>


                    <div class="layui-col-md3">
                        <div class=" example-color " style="border:1px solid #ecedf2">
                            <p>#768093，#1E9FFF</p>
                            <p><a href="">$link-color $link-hover-color</a></p>
                            <p>链接色</p>
                        </div>
                    </div>

                </div>


            </div>


            <h1 class="heading-mi">场景色</h1>


            <div class="example">

                <div class="layui-row layui-col-space15 ">

                    <div class="layui-col-md3">
                        <div class="bg-blue text-white example-color">
                            <p>#1E9FFF</p>
                            <p> 蓝色
                            </p>

                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-yellow  text-white example-color">
                            <p>#FFB800</p>
                            <p>黄暖色
                            </p>

                        </div>
                    </div>


                    <div class="layui-col-md3">

                        <div class="bg-red text-white example-color">
                            <p>#FF5722</p>
                            <p>红色
                            </p>

                        </div>

                    </div>
                    <div class="layui-col-md3">
                        <div class="bg-black  text-white example-color">
                            <p>#252629</p>
                            <p>黑色
                            </p>

                        </div>


                    </div>


                    <div class="layui-col-md3">
                        <div class="bg-green  text-white example-color">
                            <p>#52c41a</p>
                            <p>绿色
                            </p>

                        </div>


                    </div>


                    <div class="layui-col-md3">
                        <div class="bg-cyan  text-white example-color">
                            <p>#009688</p>
                            <p>青色
                            </p>

                        </div>


                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-orange text-white example-color">
                            <p>#f48c02</p>
                            <p>橘色
                            </p>

                        </div>

                    </div>



                    <div class="layui-col-md3">
                        <div class="bg-pink  text-white example-color">
                            <p>#eb2f96</p>
                            <p>粉色
                            </p>

                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-purple  text-white example-color">
                            <p>#6f35f0</p>
                            <p>紫色
                            </p>

                        </div>
                    </div>


                    <div class="layui-col-md3">
                        <div class="bg-grey  text-white example-color">
                            <p>#768093</p>
                            <p>灰色
                            </p>

                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-white  text-black example-color" style="border:1px solid #e2e2e2">
                            <p>#fff</p>
                            <p>白色
                            </p>

                        </div>
                    </div>


                    <div class="layui-col-md3">
                        <div class="bg-deepblack  text-white example-color" style="border:1px solid #e2e2e2">
                            <p>#393D49</p>
                            <p>深黑</p>

                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-lightblack  text-white example-color" >
                            <p>#2F4056</p>
                            <p>浅黑（侧边等颜色）
                            </p>

                        </div>
                    </div>



                    <div class="layui-col-md3">
                        <div class="bg-lightblue  text-white example-color">
                            <p>#8abee5</p>
                            <p>浅蓝
                            </p>

                        </div>
                    </div>

                    <div class="layui-col-md3">
                        <div class="bg-deepblue  text-white example-color">
                            <p>#1d508d</p>
                            <p>深蓝
                            </p>

                        </div>
                    </div>

                </div>


            </div>


            <h1 class="heading-mi">字体色</h1>


            <div class="example">

                <div class="layui-row">

                    <div class="layui-col-md6">


                        <p class="text-red" style="margin-bottom: .3rem">
                            赤色：class="text-red"
                        </p>
                        <p class="text-orange" style="margin-bottom: .3rem">
                            橙色：class="text-orange"
                        </p>
                        <p class="text-green" style="margin-bottom: .3rem">
                            墨绿：class="text-green"
                        </p>
                        <p class="text-cyan" style="margin-bottom: .3rem">
                            藏青：class="text-cyan"
                        </p>
                        <p class="text-purple" style="margin-bottom: .3rem">
                            淡紫：class="text-purple"
                        </p>
                        <p class="text-deepblue" style="margin-bottom: .3rem">
                            深蓝：class="text-deepblue"
                        </p>
                        <p class="text-lightblue" style="margin-bottom: .3rem">
                            淡蓝：class="text-lightblue"
                        </p>

                    </div>

                    <div class="layui-col-md6">

                        <p class="text-blue" style="margin-bottom: .3rem">
                            蓝色：class="text-blue"
                        </p>


                        <p class="text-black" style="margin-bottom: .3rem">
                            雅黑：class="text-black"
                        </p>
                        <p class="text-grey" style="margin-bottom: .3rem">
                            银灰：class="text-grey"
                        </p>


                        <p class="text-pink" style="margin-bottom: .3rem">
                            粉色：class="text-pink"
                        </p>
                        <p class="text-yellow" style="margin-bottom: .3rem">
                            黄暖色：class="text-yellow"
                        </p>

                        <p class="text-lightblack" style="margin-bottom: .3rem">
                            亮黑：class="text-lightblack"
                        </p>

                        <p class="text-deepblack" style="margin-bottom: .3rem">
                            深黑：class="text-deepblack"
                        </p>

                    </div>

                </div>


            </div>


        </div>

    </div>
</div>

<div class="layui-col-md12">
    <div class="s-footer">
        <ul>
            <li><strong>Simple </strong></li>
            <li>Version: v1.0</li>
            <li>Last Update:2018-7-30</li>
            <li>
                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260258189'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1260258189%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
            </li>
        </ul>
    </div>
</div>

<script>


    layui.use(['element','form','jquery','upload'], function(){

        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;


        // 子菜单静态高亮
        $('.s-subheader a').each(function(){

            filename=location.href.substr(location.href.lastIndexOf('/')+1);

            if ($(this).attr("href") == filename ){
                $(this).addClass("active");
            }
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#btnlogo' //绑定元素
            ,url: '/upload/' //上传接口
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
</body>
</html>
